<template>
  <div class="page channels" :style="{minHeight:docHeight}">
    <LeftSideBar></LeftSideBar>
    <div class="content-main clearfix">
      <ELHeader></ELHeader>
      <div class="right-content clearfix">
        <div class="breadcrumb">
          <el-breadcrumb separator=">">
            <i class="bread-ico">
              <icon name="wpexplorer"></icon>
            </i>
            <el-breadcrumb-item :to="{ path: '/' }">
              首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>渠道编辑</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="btn-group">
          <el-button @click="addChannel = true" size="small">添加渠道</el-button>
        </div>
        <div class="tabpane-container" ref="tabpaneContainer" v-loading.body="loading">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="渠道列表" name="channel-list"></el-tab-pane>
            <el-tab-pane label="未定义的渠道ID列表" name="undefined-channel-list"></el-tab-pane>
            <el-tab-pane ref="editContainer" label="编辑渠道" name="profile-edit" class="scroll" :style="'height:' + (this.tabHeight + 80) + 'px;'">
              <EditChannel @updateEdit="updateEdit"></EditChannel>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-dialog title="添加渠道" v-model="addChannel" top="15%">
        <EditChannel :emptyData = "true" v-if="addChannel" successMsg="添加渠道成功" @success="addChannelSuccess"></EditChannel>
      </el-dialog>
    </div>
    <SelectSite v-if="switchSite"></SelectSite>
  </div>
</template>

<style lang="scss">
  @import '../scss/index';
    .echarts {
        height: 300px
    }

    .channels {
      .error {
        color: red;
      }
    }
    .btn-group {
      overflow: hidden;

      button {
        float: left;
      }
    }

    .content-main{
      height: 0;
      position: relative;
      float: left;
      min-height: 100%;
      width: 85%;
    }

    .short {
      max-width: 300px;
    }

    .right-content{
      padding-left: 20px;
      margin-top: 70px;
      padding-bottom: 100px;
      width: 99%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .echart-line{
      width: 100%;
      height: 400px;
    }

    .bread-ico {
      float: left;
      margin-right: 8px;
      margin-top: -8px;
      width: 30px;

      .fa-icon {
        width: 100%;
        height: 100%;
      }
    }

    .right-content {
      .el-tabs__header {
        margin-bottom: 0;
      }
      .el-tab-pane {
        padding-top: 15px;
      }
      .el-tabs__content {
        // height:  30rem;
        overflow-y: auto!important;
      }
    }

    .badge-list .el-badge {
      margin-right: 40px;
    }

    .scroll {
      width: 99%;
      overflow: hidden;
      overflow-y: auto;
    }

    .import-item {
      border-bottom: 1px solid rgb(223, 230, 236);
    }

    .short.el-select {
      min-width: 300px;
    }
</style>

<script>
import Header from 'components/AdminHeader'
import LeftSideBar from 'components/LeftSideBar'
import SelectSite from 'components/SelectSite'
import ChannelList from 'components/ChannelList'
import EditChannel from 'components/EditChannel'
import { Col } from 'element-ui'
import { mapState, mapActions } from 'vuex'
import { Popover, Breadcrumb, BreadcrumbItem,
  Tabs, TabPane, Button, Dialog,Table,TableColumn} from 'element-ui'
import Config from '../config/common'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/wpexplorer'

export default {
  data () {
    return {
      siteData: [],
      channelId: null,
      loading: false,
      showUserPanel: false,
      docHeight: window.innerHeight + 'px',
      screenWidth: document.body.clientWidth,
      resize: false,
      addChannel: false,
      activeName: '',
      fileList: [],
      isInit: false,
      list: [],
      tableData: [],
      filters: [],
      tabHeight: 500,
      total: 0,
      queryData: {
        'page_index': 1,
        'page_size': 10
      },
      showHeader: false,
      responseList: {},
      currentPage: 1,
      siteDetail: {}
    }
  },

  watch: {
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        const that = this

        setTimeout(function () {
          that.resize = !that.resize
          that.timer = false
        }, 400)
      }
    },
    switchSite (value) {
      if (value === false) {
        this.loading = true
        setTimeout(() => {
          this.initialize()
        }, 2000)
      }
    },
    uploadDialog (value) {
      console.log(value)
      if (value === false) {
        this.emptySites()
        this.getChannels()
      }
      this.tableData = []
      this.fileList = []
      this.responseList = {}
        // this.$refs.upload.clearFiles()
      // }
    }
  },
  methods: {
    updateEdit () {
    },
    handleSizeChange (val) {
      this.queryData['page_size'] = val
      this.page_size = val
      // hack
      this.setSizeInputVal(val)
      console.log(`每页 ${val} 条`)
      this.emptySites()
      this.getChannels()
    },
    addChannelSuccess () {
      setTimeout(() => {
        this.addChannel = false
      }, 1000)
    },
    changeVal (el, val) {
      // console.log(el, val)
      el.$el.getElementsByClassName('el-input__inner')[0].value = val || '请选择'
    },
    handleCurrentChange (val) {
      // if (this.isInit === false && parseInt(this.$route.query.page_index)) {
      //   val = parseInt(this.$route.query.page_index)
      //   this.currentPage = val
      //   this.isInit = true
      //   return
      // }
      this.queryData['page_index'] = val
      console.log(`当前页: ${val}`)
      this.emptySites()
      this.getChannels()
    },
    handleClick (tab, event) {
      if (this.activeName === 'channel-list') {
        this.$router.push({ path: '/channels' })
        this.getChannels()
        this.channelId = null
        this.isEdit = false
      } else if (this.activeName === 'undefined-channel-list') {
        this.$router.push({ name: 'undefined_channels' })
      }
      console.log(tab, this.activeName)
    },
    emptySites () {
      this.list = []
    },
    reverse (object) {
      var NewObj = {}
      var keysArr = Object.keys(object)
      for (var i = keysArr.length - 1; i >= 0; i--) {
        NewObj[keysArr[i]] = object[keysArr[i]]
      }
      return NewObj
    },
    filterPage (value, row) {
      console.log(value, row)
      return row.page_index === value
    },
    initialize () {
      const windowHeight = window.innerHeight
      const offsetTop = this.$refs['tabpaneContainer'].offsetTop
      this.activeName = 'profile-edit'
      this.tabHeight = windowHeight - offsetTop - 130
      var channelName = this.$route.query.channel_name
      this.channelId = this.$route.params.id
      const channelDetail = {
        channel_name: channelName === '无' ? '' : channelName,
        channel_id: this.channelId
      }
      console.log(JSON.stringify(channelDetail))
      this.channelDetail = channelDetail
    },
    ...mapActions({
      requestSites: 'getChannels',
      getDictionary: 'getDictionary',
      getCustom: 'getCustom',
      saveCustom: 'saveCustom',
      updateMenuIndex: 'updateMenuIndex'
    })
  },
  mounted: function () {
    this.updateMenuIndex('channels')

    if (!!this.switch_site === false) {
      this.initialize()
    }
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      })()
    }
  },

  components: {
    ELHeader: Header,
    LeftSideBar: LeftSideBar,
    EditChannel: EditChannel,
    ChannelList: ChannelList,
    [Popover.name]: Popover,
    [Breadcrumb.name]: Breadcrumb,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [BreadcrumbItem.name]: BreadcrumbItem,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    // [Pagination.name]: Pagination,
    // [Form.name]: Form,
    // [Select.name]: Select,
    // [Input.name]: Input,
    // [Option.name]: Option,
    // [FormItem.name]: FormItem,
    SelectSite,
    'el-col': Col,
    'icon': Icon
  },
  computed: {
    ...mapState({
      token: state => state.auth.user.token,
      switchSite: state => state.site.switch_site
    })
  }
}

</script>
